<div class="card">
    <div class="card-header">
        <div class="d-flex align-items-center flex-wrap gap-2">
            <div class="flex-grow-1">
                <button class="btn btn-secondary add-btn"
                        hx-get="/base/modal-create?module={{ model.module }}&model={{ model.model.name }}"
                        data-bs-toggle="modal" hx-trigger="click"
                        data-bs-target="#{{ modal_id }}" hx-target="#{{ modal_id }}"
                        hx-swap="innerHTML">
                    <i class="ri-add-fill me-1 align-bottom"></i> Add {{ model.model.name|capitalize }}
                </button>
            </div>
            <div class="flex-shrink-0">
                <div class="hstack text-nowrap gap-2">
                    <button class="btn btn-soft-danger" id="remove-actions"
                            onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i>
                    </button>
                    <button class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#filter"><i
                            class="ri-filter-2-line me-1 align-bottom"></i> Filters
                    </button>
                    <button class="btn btn-soft-success">Import</button>
                    <button type="button" id="dropdownMenuLink1" data-bs-toggle="dropdown"
                            aria-expanded="false" class="btn btn-soft-info"><i
                            class="ri-more-2-fill"></i></button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <li><a class="dropdown-item" href="#">Action 1</a></li>
                        <li><a class="dropdown-item" href="#">Action 2</a></li>
                        <li><a class="dropdown-item" href="#">Action 3</a></li>
                        <li><a class="dropdown-item" href="#">Action 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
